<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>    
    </h:head>
    <h:body>
        <ui:composition template="../../template/template.xhtml">
            <ui:define name="content">

                <h:form id="form1">

                    <p:messages id="msg" closable="true"/>

                    <!-- criteria -->
                    <p:panel header="Search">
                        <p:panelGrid id="search" columns="2">

                            <h:outputLabel value="User name"/>
                            <p:inputText value="#{userController.userCriteria.userName}"/>

                            <h:outputLabel value="Fisrt name"/>
                            <p:inputText value="#{userController.userCriteria.firstName}"/>

                            <h:outputLabel value="Province"/>
                            <p:selectOneMenu value="#{userController.userCriteria.provinceId}" style="width:200px" filter="true">
                                <f:selectItem itemLabel="" itemValue=""/> 
                                <f:selectItems value="#{userController.listProvinces}" var="item" itemLabel="#{item.provinceName}" itemValue="#{item.provinceId}"/>
                            </p:selectOneMenu>

                            <p:commandButton value="Create" action="#{userController.initCreatePopup()}" process="search" update="dialogCreate" oncomplete="dlgCreateUser.show()"/>
                            <h:panelGroup>
                                <p:commandButton value="Search" action="#{userController.search()}" process="search" update="dataTable"/>
                                <p:commandButton value="Reset" action="#{userController.reset()}" process="search" update="search dataTable"/>
                            </h:panelGroup>
                        </p:panelGrid>
                    </p:panel>

                    <!-- create user -->
                    <p:dialog header="Create User" id="dialogCreate" widgetVar="dlgCreateUser">
                        <p:panel header="User Management" style="height: 400px; overflow-y: scroll">

                            <p:panelGrid columns="2">
                                <h:outputLabel value="User name"/>
                                <p:inputText value="#{userController.regUser.userName}" required="false" requiredMessage="Please enter Username"/>

                                <h:outputLabel value="Password"/>
                                <p:password value="#{userController.regUser.userPassword}" required="false" requiredMessage="Please enter Password"/>

                                <h:outputLabel value="Re-Password"/>
                                <p:password value="#{userController.validatePassword}" required="false" requiredMessage="Please enter Re-Password"/>

                                <h:outputLabel value="First name"/>
                                <p:inputText value="#{userController.regUser.firstName}"/>

                                <h:outputLabel value="Last name"/>
                                <p:inputText value="#{userController.regUser.lastName}"/>

                                <h:outputLabel value="Gender"/>
                                <p:selectOneRadio value="#{userController.regUser.gender}">
                                    <f:selectItem itemLabel="Male" itemValue="0"/>  
                                    <f:selectItem itemLabel="Female" itemValue="1" />  
                                </p:selectOneRadio>

                                <h:outputLabel value="User Group"/>
                                <p:selectOneMenu value="#{userController.regUser.userGroup}" style="width:200px">
                                    <f:selectItem itemLabel="Admin" itemValue="0"/>  
                                    <f:selectItem itemLabel="User" itemValue="1" />  
                                </p:selectOneMenu>

                                <h:outputLabel value="Address"/>
                                <p:inputTextarea value="#{userController.regAddress.addresDetail}"/>

                                <h:outputLabel value="Province"/>
                                <p:selectOneMenu value="#{userController.regAddress.provinceId}" style="width:200px" filter="true">
                                    <f:selectItem itemLabel="" itemValue=""/> 
                                    <f:selectItems value="#{userController.listProvinces}" var="item" 
                                                   itemLabel="#{item.provinceName}" itemValue="#{item.provinceId}"/> 
                                    <p:ajax update="ddl_amphur" 
                                            listener="#{userController.getListAmpur(userController.regAddress.provinceId)}"/>  
                                </p:selectOneMenu>

                                <h:outputLabel value="Amphur"/>
                                <p:selectOneMenu id="ddl_amphur" value="#{userController.regAddress.amphurId}" style="width:200px">
                                    <f:selectItem itemLabel="" itemValue=""/> 
                                    <f:selectItems value="#{userController.listAmphurs}" var="item" 
                                                   itemLabel="#{item.amphurName}" itemValue="#{item.amphurId}"/>
                                    <p:ajax update="ddl_district" 
                                            listener="#{userController.getListDistric(userController.regAddress.amphurId)}"/>
                                </p:selectOneMenu>

                                <h:outputLabel value="District"/>
                                <p:selectOneMenu id="ddl_district" value="#{userController.regAddress.tumbolId}" style="width:200px">
                                    <f:selectItem itemLabel="" itemValue=""/> 
                                    <f:selectItems value="#{userController.listDistricts}" var="item" 
                                                   itemLabel="#{item.districtName}" itemValue="#{item.districtId}"/> 
                                </p:selectOneMenu>

                                <h:outputLabel value="District"/>
                                <p:button value="Map" onclick="dlgMap.show();
                                        return false;"/>

                                <h:outputLabel value="User Image" rendered="false"/>
                                <p:button value="Capture" onclick="dlg1.show();
                                        return false;" rendered="false"/>

                                <p:commandButton value="Save" action="#{userController.save()}" process="dialogCreate" update="msg,dataTable"/>

                            </p:panelGrid>

                        </p:panel>
                    </p:dialog>

                    <!-- edit user -->
                    <p:dialog header="Edit User" id="dialogEdit" widgetVar="dlgUser">
                        <p:panelGrid columns="2" id="editPanel">
                            <h:outputLabel value="User name"/>
                            <p:inputText value="#{userController.regUser.userName}" required="false" requiredMessage="Please enter Username"/>

                            <h:outputLabel value="Password"/>
                            <p:password value="#{userController.regUser.userPassword}" redisplay="true" required="false" requiredMessage="Please enter Password"/>

                            <h:outputLabel value="Re-Password"/>
                            <p:password value="#{userController.validatePassword}" redisplay="true" required="false" requiredMessage="Please enter Re-Password"/>

                            <h:outputLabel value="First name"/>
                            <p:inputText value="#{userController.regUser.firstName}"/>

                            <h:outputLabel value="Last name"/>
                            <p:inputText value="#{userController.regUser.lastName}"/>

                            <h:outputLabel value="Gender"/>
                            <p:selectOneRadio value="#{userController.regUser.gender}">
                                <f:selectItem itemLabel="Male" itemValue="0"/>  
                                <f:selectItem itemLabel="Female" itemValue="1" />  
                            </p:selectOneRadio>

                            <h:outputLabel value="User Group"/>
                            <p:selectOneMenu value="#{userController.regUser.userGroup}" style="width:200px">
                                <f:selectItem itemLabel="Admin" itemValue="0"/>  
                                <f:selectItem itemLabel="User" itemValue="1" />  
                            </p:selectOneMenu>

                            <h:outputLabel value="Address"/>
                            <p:inputTextarea value="#{userController.regAddress.addresDetail}"/>

                            <h:outputLabel value="Province"/>
                            <p:selectOneMenu value="#{userController.regAddress.provinceId}" style="width:200px" filter="true">
                                <f:selectItem itemLabel="" itemValue=""/> 
                                <f:selectItems value="#{userController.listProvinces}" var="item" 
                                               itemLabel="#{item.provinceName}" itemValue="#{item.provinceId}"/> 
                                <p:ajax update="edit_ddl_amphur"/>  
                            </p:selectOneMenu>

                            <h:outputLabel value="Amphur"/>
                            <p:selectOneMenu id="edit_ddl_amphur" value="#{userController.regAddress.amphurId}" style="width:200px">
                                <f:selectItem itemLabel="" itemValue=""/> 
                                <f:selectItems value="#{userController.getListAmpur(userController.regAddress.provinceId)}" var="item" 
                                               itemLabel="#{item.amphurName}" itemValue="#{item.amphurId}"/>
                                <p:ajax update="edit_ddl_district"/>
                            </p:selectOneMenu>

                            <h:outputLabel value="District"/>
                            <p:selectOneMenu id="edit_ddl_district" value="#{userController.regAddress.tumbolId}" style="width:200px">
                                <f:selectItem itemLabel="" itemValue=""/> 
                                <f:selectItems value="#{userController.getListDistric(userController.regAddress.amphurId)}" var="item" 
                                               itemLabel="#{item.districtName}" itemValue="#{item.districtId}"/> 
                            </p:selectOneMenu>

                            <h:outputLabel value="User Image" rendered="false"/>
                            <p:button value="Capture" onclick="dlg1.show();
                                    return false;" rendered="false"/>

                            <p:commandButton value="Edit" action="#{userController.edit()}" process="editPanel" update="msg,dataTable"/>

                        </p:panelGrid>
                    </p:dialog>

                    <!-- camera -->
                    <p:dialog header="Capture" widgetVar="dlg1">
                        <h:panelGrid columns="2" id="pnPhoto">  
                            <p:photoCam widgetVar="pc" listener="#{userController.oncapture}" update="photos"/>  
                            <p:commandButton type="button" value="Capture" onclick="pc.capture()"/>  

                            <p:graphicImage id="photos" value="/photocam/#{userController.userPhoto}" rendered="#{userController.userPhoto!=null}" />

                        </h:panelGrid>
                    </p:dialog>

                    <!-- Report bar Chart-->
                    <p:dialog header="Report bar Chart Group by Province" id="dlgbar1" widgetVar="dlgbar1">
                        <p:barChart id="barChart" widgetVar="barChart" rendered="#{userController.groupProvince!=null}" value="#{userController.groupProvince}" legendPosition="ne"  
                                    title="Basic Bar Chart" min="0" max="20" style="width: 400px;height:300px" xaxisAngle="270"/>
                        <p:commandButton value="Download" type="button" icon="ui-icon-print" onclick="window.open(PF('barChart').exportAsImage().src)">
                        </p:commandButton>
                    </p:dialog>

                    <p:dialog header="Report Line Chart Group by Province" id="dlgLine1" widgetVar="dlgLine1">
                        <p:lineChart id="lineChart" widgetVar="lineChart" rendered="#{userController.groupProvince!=null}" value="#{userController.groupProvince}" legendPosition="ne"  
                                     title="Basic Line Chart" style="width: 400px;height:300px" xaxisAngle="270"/>
                        <p:commandButton value="Download" type="button" icon="ui-icon-print" onclick="window.open(PF('lineChart').exportAsImage().src)">
                        </p:commandButton>
                    </p:dialog>


                    <p:panel header="Export">
                        <p:panelGrid columns="3">
                            <p:commandButton id="downloadLink" value="Download" process="@this" action="#{userController.fileExportXLS()}" ajax="false"
                                             icon="ui-icon-arrowthichk-s">
                            </p:commandButton>
                            <p:commandButton id="bar" value="Report Bar" process="@this" update=":form1:dlgbar1" action="#{userController.gennerateReportGroupByProvince()}" oncomplete="dlgbar1.show()"
                                             icon="ui-icon-arrowthichk-s">
                            </p:commandButton>
                            <p:commandButton id="line" value="Report Line" process="@this" update=":form1:dlgLine1" action="#{userController.gennerateReportGroupByProvince()}" oncomplete="dlgLine1.show()"
                                             icon="ui-icon-arrowthichk-s">
                            </p:commandButton>
                        </p:panelGrid>
                    </p:panel>

                    <!-- data table -->
                    <p:dataTable id="dataTable" var="item" value="#{userController.userDetailsLazy}"  
                                 paginator="true" rows="10" style="width:1550px" lazy="true"
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 rowsPerPageTemplate="5,10">

                        <p:column>  
                            <f:facet name="header">  
                                <h:outputText value="User name" />  
                            </f:facet>  
                            <h:outputText value="#{item.userName}" />  
                        </p:column>

                        <p:column>  
                            <f:facet name="header">  
                                <h:outputText value="First name" />  
                            </f:facet>  
                            <h:outputText value="#{item.firstName}" />  
                        </p:column>

                        <p:column>  
                            <f:facet name="header">  
                                <h:outputText value="Last name" />  
                            </f:facet>  
                            <h:outputText value="#{item.lastName}" />  
                        </p:column>

                        <p:column>  
                            <f:facet name="header">  
                                <h:outputText value="Province" />  
                            </f:facet>  
                            <h:outputText value="#{item.provinceName}" /> 
                        </p:column>

                        <p:column>  
                            <f:facet name="header">  
                                <h:outputText value="Amphur" />  
                            </f:facet>  
                            <h:outputText value="#{item.amphurName}" /> 
                        </p:column>

                        <p:column>  
                            <f:facet name="header">  
                                <h:outputText value="District" />  
                            </f:facet>  
                            <h:outputText value="#{item.districtName}" /> 
                        </p:column>

                        <p:column>  
                            <f:facet name="header">  
                                <h:outputText value="Gender" />  
                            </f:facet>  
                            <h:outputText value="#{item.gender=='0'?'Male':'FeMale'}" />  
                        </p:column>

                        <p:column width="200">
                            <f:facet name="header">  
                                <h:outputText value="Edit" />  
                            </f:facet>
                            <p:commandButton value="Edit" icon="ui-icon-pencil" action="#{userController.initEditPopup(item.userId)}" 
                                             process="dataTable" update=":form1:dialogEdit"/>
                            <p:commandButton value="Delete" icon="ui-icon-trash" action="#{userController.delete(item.userId)}" process="dataTable" update="dataTable"/>
                        </p:column>

                    </p:dataTable>

                    <!-- map -->
                    <p:dialog header="Map" id="dialogMap" widgetVar="dlgMap">
                        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                        <p:growl id="messages" showDetail="true" />  

                        <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"   
                                style="width:600px;height:400px"    
                                onPointClick="handlePointClick(event);"   
                                widgetVar="map" />  

                        <p:dialog widgetVar="dlg" showEffect="fade">  
                            <h:form id="form2" prependId="false">  
                                <h:panelGrid columns="2">  
                                    <h:outputLabel for="title" value="Title:" />  
                                    <p:inputText id="title" value="#{userController.title}" />  

                                    <f:facet name="footer">  
                                        <p:commandButton value="Add"   
                                                         actionListener="#{userController.addMarker}"   
                                                         process="form2"
                                                         update=":form1:messages"   
                                                         oncomplete="markerAddComplete()"/>  
                                        <p:commandButton value="Cancel" onclick="return cancel()"/>  
                                    </f:facet>  
                                </h:panelGrid>  

                                <input id="lat" type="hidden" value="${userController.lat}" name="lat"/>
                                <input id="lng" type="hidden" value="${userController.lng}" name="lng"/>
                            </h:form>  
                        </p:dialog> 

                        <script type="text/javascript">
                            var currentMarker = null;

                            function handlePointClick(event) {
                                if (currentMarker === null) {
                                    document.getElementById('lat').value = event.latLng.lat();
                                    document.getElementById('lng').value = event.latLng.lng();

                                    currentMarker = new google.maps.Marker({
                                        position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
                                    });

                                    PF('map').addOverlay(currentMarker);

                                    PF('dlg').show();
                                }
                            }

                            function markerAddComplete() {
                                var title = document.getElementById('form1:title');
                                currentMarker.setTitle(title.value);
                                title.value = "";

                                currentMarker = null;
                                PF('dlg').hide();
                            }

                            function cancel() {
                                PF('dlg').hide();
                                currentMarker.setMap(null);
                                currentMarker = null;

                                return false;
                            }
                        </script>  
                    </p:dialog>



                    <p:blockUI block="form1"  widgetVar="blogui01">
                        LOADING<br />
                    </p:blockUI>

                    <p:ajaxStatus onstart="blogui01.show()" oncomplete="blogui01.hide()"/>
                </h:form>


                <style>
                    body{
                        font-size: 12px;
                    }
                </style>


            </ui:define>
        </ui:composition>
    </h:body>
</html>